<template>
  <van-nav-bar
      title="实名认证"
      left-text="返回"
      left-arrow
      fixed
      @click-left="onClickLeft"
      dis/>
<!--实名认证-->
  <div class="one">
    <van-steps :active="active" class="van-steps" active-color="black">
      <van-step>上传身份证</van-step>
      <van-step>填写数据</van-step>
      <van-step>认证完成</van-step>
    </van-steps>
  </div>

<!--  详情-->
  <div class="xq">
    <hr>
    <p class="ppp" style="text-align: left">请上传本人真实的身份证照片，请保证身份证清晰可见，否则将会无法通过审核。</p>
  </div>

<!--  传图片-->
  <div class="ctp">
<!--    tu1-->
    <div class="tu1">
      <div class="ttt1">
      <van-uploader :after-read="afterRead1">
        <van-icon name="notes-o" size="40"/>
        <van-icon name="friends-o" size="40"/>
      </van-uploader>
      </div>
      <p>请上传身份证正面照片</p>
    </div>
<!--    tu2-->
    <div class="tu2">
      <div class="ttt1">
      <van-uploader :after-read="afterRead2">
        <van-icon name="notes-o" size="40"/>
        <van-icon name="award-o" size="40"/>
      </van-uploader>
      </div>
      <p>请上传身份证国徽面</p>
    </div>
  </div>

<!--  身份信息提示-->
  <div class="ts">
    <p class="sfts">身份证信息(上传照片后自动填充，无需填写)</p>
  </div>
<!--  输入姓名身份证-->
  <div class="sr">
    <van-cell-group inset>
      <!-- 输入任意文本 -->
      <van-field v-model="userMes.name" label="真实姓名"
                 class="van-field"
                 label-align="left"
                 placeholder="请输入您的真是姓名"
                 size="large"
      />
      <hr class="hhhhi">
      <!-- 输入手机号，调起手机号键盘 -->
      <van-field v-model="userMes.cardNumber" type="tel" label="身份证号"
                 class="van-field"
                 label-align="left"
                 placeholder="请输入您的真实身份证号码"
                 size="large"
      />
      <hr class="hhhhi">
    </van-cell-group>
  </div>
<!--  发布-->
<!--  <van-popup v-model:show="show" position="bottom" :style="{ height: '25%', borderRadius: '0 0 15px 15px' }">-->
<!--    <van-picker title="标题" :columns="columns"  @confirm="onConfirm"/>-->
<!--  </van-popup>-->
  <van-popup v-model:show="show12" :style="{ padding: '64px' }">{{ count }}秒后返回网站首页</van-popup>
  <!--上传-->
  <div class="up" @click="authentication">
    <h3 class="jiji">发布认证</h3>
  </div>

</template>

<script setup>
import {onMounted, ref} from 'vue'
import axios from "axios";
import {useStore} from '../../pinia/index.js'
const store=useStore()
const onClickLeft = () => history.back();
const active = ref(1);
const userMes=ref({});
//倒计时
const count=ref(0)
const show12=ref(false)
//成功展示
const show=ref(false)
//上传图片
const afterRead1 = (file) => {
  const formData = new FormData()
  formData.append('file', file.file)
  console.log(formData)
  axios.post("http://39.106.55.36:9099/my/load", formData).then(r => {
    userMes.value.cardZ=r.data.data
  })
}

//上传图片
const afterRead2 = (file) => {
  const formData = new FormData()
  formData.append('file', file.file)
  console.log(formData)
  axios.post("http://39.106.55.36:9099/my/load", formData).then(r => {
    userMes.value.cardF=r.data.data
  })
}
import {useRouter} from "vue-router";
const router=useRouter();
const storeUser=useStore();
//认证
const authentication = () => {
  axios.post("http://39.106.55.36:9099/my/authentication", userMes.value).then(r => {
    show12.value=true
    setInterval(()=>{
      count.value++
      if(count.value===5){
        show12.value=false
        store.user.realname="已经认证"
        storeUser.user.shiming = 1
        router.push("/message")
      }
    },1000)


  })
}

</script>

<style scoped>
.jiji{
  margin-top: 6px;
  color: #dbd3d3;
}
.up{
  position: absolute;
  width: 354px;
  height: 39px;
  background-color: #1a1a1a;
  top: 815px;
  left: 32px;
}
.hhhhi{
  width: 400px;
}
.van-field{
  margin-left: -14px;
  --van-field-label-margin-right: -17px;
}
.sr{
  position: absolute;
  top: 410px;
  left: -2px;
}
.ts{
  position: absolute;
  left: 14px;
  top: 373px;
  text-align: left;
}
.ctp{
  position: absolute;
  width: 400px;
  height: 195px;
  top: 221px;
  left: 14px;
}
.tu1{
  position: absolute;
  padding-top: 20px;
  padding-left: 41px;
  width: 148px;
  height: 111px;
  border: 1px solid #bdbbbb;
  border-radius: 5px;
}
.ttt1{
  width: 100px;
  height: 53px;
  padding-top: 10px;
  border: 1px solid #bdbbbb;
  border-radius: 5px;
}
.tu2{
  position: absolute;
  padding-top: 20px;
  padding-left: 41px;
  width: 148px;
  height: 111px;
  left: 210px;
  border: 1px solid #bdbbbb;
  border-radius: 5px;
}
.xq{
  position: absolute;
  top: 137px;
  left: 14px;
  width: 400px;
  height: 75px;
}
.one{
  position: absolute;
  top: 66px;
  left: 15px;

}
.ppp ,.sfts{
  margin: auto;
  color: #1a1a1a;
}
.van-steps{
  width: 380px;
  height:50px;
  --van-step-icon-size: 20px;
  --van-step-circle-size: 10px;
  --van-step-font-size:20px
}
p{
 margin-top: 14px;
 margin-left: -43px;
  color: #888888;

}

</style>
